<template>
  <div class="sign-in" v-if="!bindType">
    <Header />
    <div class="form-container">
      <a-form ref="formRef" :model="formData">
        <a-form-item
          name="mobile"
          :rules="[
            {
              required: true,
              message: $t('form.login.form.item_1.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            size="large"
            :placeholder="$t('form.login.form.item_1.rules.error_1')"
            allow-clear
            v-model:value.trim="formData.mobile"
          >
            <template #prefix
              ><svg
                class="prefix-icon"
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="10"
                  cy="6.66667"
                  r="4.16667"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
                <path
                  d="M17.5 17.5C17.5 16.1739 16.7098 14.9021 15.3033 13.9645C13.8968 13.0268 11.9891 12.5 10 12.5C8.01088 12.5 6.10322 13.0268 4.6967 13.9645C3.29018 14.9021 2.5 16.1739 2.5 17.5"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
              </svg>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          name="password"
          :rules="[
            {
              required: true,
              message: $t('form.login.form.item_2.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input-password
            size="large"
            type="password"
            :placeholder="$t('form.login.form.item_2.rules.error_1')"
            allow-clear
            :maxlength="30"
            v-model:value.trim="formData.password"
          >
            <template #prefix>
              <svg
                class="prefix-icon"
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  x="2.5"
                  y="7.5"
                  width="15"
                  height="10"
                  rx="1.66667"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
                <path
                  d="M13.3333 7.5V5.83333C13.3333 3.99238 11.8409 2.5 9.99996 2.5V2.5C8.15901 2.5 6.66663 3.99238 6.66663 5.83333V7.5"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10.8071 13.9592C11.3196 13.6749 11.6666 13.1283 11.6666 12.5007C11.6666 11.5802 10.9204 10.834 9.99992 10.834C9.07944 10.834 8.33325 11.5802 8.33325 12.5007C8.33325 13.1283 8.68021 13.6749 9.19279 13.9592C9.17568 14.0257 9.16659 14.0955 9.16659 14.1673V15.0007C9.16659 15.4609 9.53968 15.834 9.99992 15.834C10.4602 15.834 10.8333 15.4609 10.8333 15.0007V14.1673C10.8333 14.0955 10.8242 14.0257 10.8071 13.9592Z"
                  fill="#CCD6DE"
                />
              </svg>
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <div class="footer">
            <div></div>
            <div>
              {{ $t("form.login.forget_password") }}？<br
                v-if="locale != 'cn'"
              /><span @click="navigateTo('/recover')">{{
                $t("btnText.recover_password")
              }}</span>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </div>
    <div class="btns">
      <a-button
        type="primary"
        :class="hasValue ? '' : 'opacity-4'"
        size="large"
        block
        @click="Login"
        :loading="isLoging"
        >{{ $t("btnText.login") }}</a-button
      >
      <a-button v-if="false" type="default" size="large" block @click="wxLogin"
        ><svg
          class="btn-icon"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16.2467 8.05122C16.5228 8.05122 16.7952 8.07211 17.0648 8.10241C16.3301 4.60164 12.671 2 8.49465 2C3.82519 2 0 5.25627 0 9.39076C0 11.7769 1.27289 13.7367 3.39917 15.2568L2.5497 17.8716L5.51893 16.3478C6.58207 16.5627 7.4341 16.7842 8.49465 16.7842C8.76108 16.7842 9.02489 16.7708 9.28743 16.7493C9.1213 16.1687 9.02489 15.5599 9.02489 14.9288C9.02492 11.1324 12.2117 8.05122 16.2467 8.05122ZM11.6801 5.69473C12.3198 5.69473 12.7433 6.12574 12.7433 6.7797C12.7433 7.43095 12.3198 7.86736 11.6801 7.86736C11.043 7.86736 10.4046 7.43095 10.4046 6.7797C10.4046 6.12574 11.043 5.69473 11.6801 5.69473ZM5.7352 7.86733C5.09807 7.86733 4.45576 7.43092 4.45576 6.77967C4.45576 6.12571 5.09807 5.6947 5.7352 5.6947C6.37161 5.6947 6.79571 6.12571 6.79571 6.77967C6.79571 7.43095 6.37161 7.86733 5.7352 7.86733ZM24 14.8244C24 11.3499 20.6015 8.51794 16.7848 8.51794C12.7433 8.51794 9.56038 11.3499 9.56038 14.8244C9.56038 18.304 12.7433 21.1299 16.7848 21.1299C17.6303 21.1299 18.4837 20.913 19.3331 20.6948L21.6634 22L21.0243 19.8287C22.7298 18.5195 24 16.7842 24 14.8244ZM14.4422 13.7367C14.0194 13.7367 13.5927 13.3064 13.5927 12.8673C13.5927 12.4342 14.0194 11.9985 14.4422 11.9985C15.0845 11.9985 15.5053 12.4342 15.5053 12.8673C15.5053 13.3064 15.0845 13.7367 14.4422 13.7367ZM19.1142 13.7367C18.6948 13.7367 18.2707 13.3064 18.2707 12.8673C18.2707 12.4342 18.6948 11.9985 19.1142 11.9985C19.7514 11.9985 20.1774 12.4342 20.1774 12.8673C20.1774 13.3064 19.7514 13.7367 19.1142 13.7367Z"
            fill="#172026"
          />
        </svg>
        {{ $t("btnText.wx_login") }}</a-button
      >
      <a-button
        v-if="false"
        type="default"
        size="large"
        block
        @click="facebookLogin"
        ><svg
          class="btn-icon"
          width="25"
          height="24"
          viewBox="0 0 25 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20.5098 2.5H4.49019C3.67057 2.5 3 3.17061 3 3.99019V20.0098C3 20.8294 3.67059 21.5 4.49019 21.5H20.5098C21.3294 21.5 22 20.8294 22 20.0098V3.99019C22 3.17061 21.3294 2.5 20.5098 2.5ZM18.4076 13.1975H16.4916V20.3824H13.8572V13.1975H11.9412V10.8025H13.8572V7.92857C13.8572 6.7311 14.9101 6.14054 15.5336 6.01257C16.2961 5.85612 18.5273 5.89287 18.5273 5.89287V8.52728H16.8508C16.3719 8.52728 16.3719 9.00634 16.3719 9.00634V10.8025H18.6471L18.4076 13.1975Z"
            fill="#172026"
          />
        </svg>
        {{ $t("btnText.facebook_login") }}</a-button
      >
    </div>
    <a-modal
      v-model:open="modalState.visible"
      :title="modalState.title"
      :footer="null"
      @cancel="closeModal"
      width="37.5vw"
    >
      <p>{{ $t("dialog.account_bind.title_1") }}</p>
      <p>{{ $t("dialog.account_bind.title_2") }}</p>
      <div class="modal-btn">
        <a-button type="default" @click="onClickBindAccount" size="large">{{
          $t("dialog.account_bind.bind_account_btn")
        }}</a-button>
        <a-button
          type="primary"
          @click="navigateTo('/register')"
          size="large"
          >{{ $t("dialog.account_bind.register_account_btn") }}</a-button
        >
      </div>
    </a-modal>
  </div>
  <div class="bind" v-else>
    <Header
      :title="`${
        bindType === 'wx'
          ? $t('form.login.bind.form_wx_title')
          : $t('form.login.bind.form_facebook_title')
      }`"
    />
    <div class="form-container">
      <a-form ref="formRef" :model="formData">
        <a-form-item
          name="mobile"
          :rules="[
            {
              required: true,
              message: $t('form.login.form.item_1.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            size="large"
            :placeholder="$t('form.login.form.item_1.rules.error_1')"
            allow-clear
            v-model:value.trim="formData.mobile"
          >
            <template #prefix
              ><svg
                class="prefix-icon"
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="10"
                  cy="6.66667"
                  r="4.16667"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
                <path
                  d="M17.5 17.5C17.5 16.1739 16.7098 14.9021 15.3033 13.9645C13.8968 13.0268 11.9891 12.5 10 12.5C8.01088 12.5 6.10322 13.0268 4.6967 13.9645C3.29018 14.9021 2.5 16.1739 2.5 17.5"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
              </svg>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          name="password"
          :rules="[
            {
              required: true,
              message: $t('form.login.form.item_2.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            size="large"
            type="password"
            :placeholder="$t('form.login.form.item_2.rules.error_1')"
            allow-clear
            v-model:value.trim="formData.password"
          >
            <template #prefix>
              <svg
                class="prefix-icon"
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  x="2.5"
                  y="7.5"
                  width="15"
                  height="10"
                  rx="1.66667"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
                <path
                  d="M13.3333 7.5V5.83333C13.3333 3.99238 11.8409 2.5 9.99996 2.5V2.5C8.15901 2.5 6.66663 3.99238 6.66663 5.83333V7.5"
                  stroke="#CCD6DE"
                  stroke-width="1.25"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10.8071 13.9592C11.3196 13.6749 11.6666 13.1283 11.6666 12.5007C11.6666 11.5802 10.9204 10.834 9.99992 10.834C9.07944 10.834 8.33325 11.5802 8.33325 12.5007C8.33325 13.1283 8.68021 13.6749 9.19279 13.9592C9.17568 14.0257 9.16659 14.0955 9.16659 14.1673V15.0007C9.16659 15.4609 9.53968 15.834 9.99992 15.834C10.4602 15.834 10.8333 15.4609 10.8333 15.0007V14.1673C10.8333 14.0955 10.8242 14.0257 10.8071 13.9592Z"
                  fill="#CCD6DE"
                />
              </svg>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <div class="footer">
            <div></div>
            <div>
              {{ $t("form.login.forget_password") }}？<span
                @click="navigateTo('/recover')"
                >{{ $t("btnText.recover_password") }}</span
              >
            </div>
          </div>
        </a-form-item>
      </a-form>
    </div>
    <div class="btns">
      <a-button
        :class="hasValue ? '' : 'opacity-4'"
        type="primary"
        size="large"
        block
        @click="bindAccount"
        >{{ $t("btnText.imed_bind") }}</a-button
      >
    </div>
  </div>
  <FormModalMemberUpdateResume
    :maskClosable="false"
    :cancelVisible="false"
    isRegister
    ref="formModalMemberUpdateResumeRef"
  ></FormModalMemberUpdateResume>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import type { LoginPrams } from "../../../types/member";
import Header from "./Header.vue";
import { getCurrentInstance, nextTick, onMounted, reactive, ref } from "vue";
import { postLogin, postEmailLogin, postMemberInfo } from "../../../api/member";
import { useMemberStore } from "../../../store";
import { useRouter } from "vue-router";
import { RegEmail } from "../../../data/reg";
import { useRoute } from "vue-router";
import { useCookie } from "nuxt/app";

const { locale, locales, setLocale } = useI18n();

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const router = useRouter();
const route = useRoute();
const memberStore = useMemberStore();
const formData = reactive<LoginPrams & { checked?: boolean }>({
  mobile: "",
  password: "",
  checked: false,
});

const formRef = ref();
const isLoging = ref(false);
const formModalMemberUpdateResumeRef = ref();
// 普通登录
const Login = () => {
  if (isLoging.value) return;
  if (!hasValue.value) return;
  formRef.value.validate().then(async () => {
    isLoging.value = true;
    let res;
    if (RegEmail.test(formData.mobile!)) {
      let params = {
        email: formData.mobile,
        password: formData.password,
      };
      res = await postEmailLogin(params);
    } else {
      res = await postLogin(formData);
    }
    isLoging.value = false;
    if (res.code === 200) {
      memberStore.updateProfile(res.data);
      // 未完善个人信息，弹窗完善信息
      if (!res.data.last_name) {
        if (isMobile()) {
          goto("/mobile/updateResume", { from: "register" });
        } else {
          nextTick(() => {
            formModalMemberUpdateResumeRef.value.show();
          });
        }
        return;
      }
      message.success({
        content: $t("message.login_success"),
        duration: 1,
      });
      let redirectPath = route.query.redirect as string;
      if (redirectPath) {
        let params: any = {};
        let query = redirectPath.split("?")[1];
        if (query) {
          query.split("&").forEach((item) => {
            let key = item.split("=")[0];
            let value = item.split("=")[1];
            params[key] = value;
          });
        }
        goto(redirectPath, params);
        return;
      }
      goto("/new_profile/base");
    } else {
      // $t("message.error.login")
      message.error(res.msg);
    }
  });
};

// 弹窗
const modalState = reactive({
  visible: false,
  title: "",
  type: "",
});

const closeModal = () => {
  modalState.visible = false;
  modalState.title = "";
  modalState.type = "";
};
let bindType = ref("");
const onClickBindAccount = () => {
  bindType.value = modalState.type;
  closeModal();
};

const bindAccount = () => {};

// 微信登录
const wxLogin = () => {
  modalState.title = $t("form.login.bind.wx_title");
  modalState.visible = true;
  modalState.type = "wx";
};

// facebook 登录
const facebookLogin = () => {
  modalState.title = $t("form.login.bind.facebook_title");
  modalState.visible = true;
  modalState.type = "facebook";
};

// 绑定按钮透明度
const hasValue = computed(() => {
  let flag = false;
  if (formData.mobile) flag = true;
  if (formData.password) flag = true;
  return flag;
});
</script>
<style scoped lang="less">
@import url("./common.less");
.ant-modal {
  p {
    font-size: 16px;
    color: #70818c;
  }
}
.modal-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 43px;
  :deep(.ant-btn) {
    border-radius: 13px !important;
  }
  .ant-btn:first-child {
    margin-right: 16px;
  }
}
.footer {
  a {
    color: var(--yd-primary-color) !important;
  }
}

@media screen and (max-width: 768px) {
  .ant-modal {
    p {
      font-size: 52px;
    }
  }
  .modal-btn {
    margin-top: 82px;
    .ant-btn {
      padding: 82px !important;
      font-size: 62px !important;
      border-radius: 42px !important;
      height: 184px !important;
      &:first-child {
        margin-right: 41px;
      }
    }
  }
}
</style>
